<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 添加用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
                
            <el-input v-model="username" placeholder="请输入用户名" clearable></el-input>
            &nbsp;
            <el-input v-model="password1" placeholder="请输入密码" clearable></el-input>
            &nbsp;
            <el-input v-model="password2" placeholder="请确认密码" clearable></el-input>
            &nbsp;
            <el-input v-model="email" placeholder="请输入邮箱" clearable></el-input>
            &nbsp;
            <el-input v-model="phone" placeholder="请输入手机号" clearable></el-input>
            &nbsp;
            <el-select v-model="per" placeholder="请选择权限">
                <el-option
                v-for="item in permission"
                :key="item.value"
                :label="item.permission"
                :value="item.id">
                </el-option>
            </el-select>
            <el-button @click="add">添加</el-button>
    </div>
</template>

<script>
import {GetPer,Add_Users} from '../../api/api.js'
    export default {
        inject:['reload'],
        name: 'company',
        data() {
            return {
                username:"",
                password1:"",
                password2:"",
                email:"",
                phone:"",
                per:"",
                permission:[],

            }
        },
        methods: {
            add(){
                let params = {

                    username:this.username,
                    password:this.password1,
                    email:this.email,
                    phone:this.phone,
                    permission:this.per
                }
                Add_Users(params).then(res=>{
                    this.$message(res.data.message)
                    this.reload()

                })


            }
        },
        computed: {
            
        },
        mounted(){
           GetPer().then(res=>{
               this.permission = res.data.data
           }) 
        }
    }

</script>

<style>
.el-main {
    background-color:#E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
.qwe{
    text-align: center;
    border-color: gray;
    width: 200px
}
</style>


